<template>
  <div>
    <div class="user">
      <h2>{{ site.app_name }}</h2>
      <p> {{ type === 'email' ? $t('邮箱登录') : $t('手机号登录') }}</p>
    </div>
    <form class="denglu">
      <ul>
        <li v-if="type === 'phone'">
          <i class="iconfont icon-xingmingyonghumingnicheng"></i>
          <div class="input-areacode">
            +{{ areacode }}
            <select
              v-model="areacode"
              name="nativePhoneCodeSelector"
              class="native-phone-code-select"
            >
              <option
                v-for="item in codeList"
                :key="item.code"
                :value="item.code"
              >{{ `+${item.code} ${item.area}` }}</option>
            </select>
          </div>
          <input
            v-model="phone"
            :placeholder="$t('请输入手机号')"
            type="tel"
          />
        </li>
        <li v-else>
          <i class="iconfont icon-xingmingyonghumingnicheng"></i>
          <input
            v-model="email"
            :placeholder="$t('请输入邮箱')"
            type="email"
          />
        </li>
        <li>
          <i class="iconfont icon-B"></i><input
            v-model="password"
            :placeholder="$t('请输入用户密码')"
            type="password"
          />
        </li>
        <div class="submit-group">
          <input
            type="button"
            :value="$t('登录')"
            class="deng"
            :class="{disabled: loading}"
            @click="handleLogin"
          />
          <span
            v-if="false"
            class="tips"
          >{{ errmsg }}</span>
        </div>
        <nuxt-link :to="type === 'phone' ? '/forget-password' : '/forget-password?type=email'">{{ $t('忘记密码') }}</nuxt-link>
        <a
          class="mail"
          @click="changeLoginType"
        >{{ type === 'phone' ? $t('邮箱登录') : $t('手机号登录') }}</a>
      </ul>
    </form>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { Indicator } from 'mint-ui'
import { AREA_CODE } from '@/constants/area-code'
import { isPhoneNumberWithZone, isEmail, isPassword } from '@/utils/validate'
export default {
  data () {
    return {
      type: 'phone', // email
      codeList: AREA_CODE,
      areacode: '86',
      phone: '',
      email: '',
      password: '',
      errmsg: '',
      loading: false
    }
  },
  computed: {
    ...mapState({
      site: ({ initInfo }) => initInfo.site
    })
  },
  methods: {
    ...mapActions({
      login: 'auth/login',
      getUserInfo: 'auth/getUserInfo'
    }),
    handleLogin () {
      if (this.loading) { return }
      const payload = {}
      let type
      do {
        if (this.type === 'email') {
          type = 1
          if (!isEmail(this.email)) {
            this.errmsg = this.$t('邮箱格式错误')
            break
          }
          payload.email = this.email
        } else {
          type = 0
          const phoneWithZone = `${this.areacode}${this.phone}`
          if (!isPhoneNumberWithZone(phoneWithZone)) {
            this.errmsg = this.$t('手机号格式错误')
            break
          }
          payload.mobile_phone = phoneWithZone
        }
        if (!isPassword(this.password)) {
          this.errmsg = this.$t('密码由6-20个数字、26个英文字母或者下划线组成')
          break
        }
        payload.password = this.password
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      const succeed = () => {
        this.getUserInfo()
        this.$router.push('/user')
      }
      const failed = (err) => {
        this.$toast.error(err.message)
      }
      this.loading = true
      Indicator.open(this.$t('登录中...'))
      // console.log(type)
      this.login([payload, type])
        .then(succeed)
        .catch(failed)
        .finally(() => {
          this.loading = false
          Indicator.close()
        })
    },
    changeLoginType () {
      if (this.type === 'email') {
        this.type = 'phone'
      } else {
        this.type = 'email'
      }
      this.phone = ''
      this.email = ''
      this.password = ''
      this.errmsg = ''
      this.loading = false
    }
  }
}
</script>
<style scoped>
.submit-group {
  clear: both;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.submit-group .deng {
  margin-bottom: 0 !important;
}
.submit-group .deng.disabled {
  opacity: 0.7;
}
.submit-group .tips {
  height: 20px;
  line-height: 20px;
  color: #d14b64;
}
</style>
